<template>
  <div class="home-container">
    <ul class="address-layout">
      <li>
        <div class="item-name">
          <span class="layout-title">后台项目</span>
        </div>
        <div class="item-content">mall</div>
      </li>
      <li>
        <div class="item-name">
          <span class="layout-title">前端项目</span>
        </div>
        <div class="item-content">mall-admin-web</div>
      </li>
      <li>
        <div class="item-name">
          <span class="layout-title">学习教程</span>
        </div>
        <div class="item-content">mall-learning</div>
      </li>
    </ul>
    <ul class="address-layout">
      <li class="indent-spacing">
        <img src="../../assets/image/indent.png" alt="" class="indent_icon" />
        <h3 class="indent-count">今日订单总数</h3>
        <span class="indent-total">200</span>
      </li>
      <li class="indent-spacing">
        <img src="../../assets/image/money-icon.png" alt="" class="indent_icon" />
        <h3 class="indent-count">今日销售总额</h3>
        <span class="indent-total">￥5000.00</span>
      </li>
      <li class="indent-spacing">
        <img src="../../assets/image/specie-icon.png" alt="" class="indent_icon" />
        <h3 class="indent-count">今日订单总数</h3>
        <span class="indent-total">￥5000.00</span>
      </li>
    </ul>
    <div class="mine-layout">
      <img src="https://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg" alt="" class="ewm-icon" />
      <div>mall全套学习教程连载中！</div>
      <div><span class="attentionTxt">关注公号</span>, 第一时间获取</div>
    </div>
    <div class="handlematter-layout">
      <h3 class="cart-title">待处理事务</h3>
      <div class="notHnadle-container">
        <ul class="display-flex p-0 m-0">
          <li class="order-column">
            <div class="un-handle-item d-flex justify-content-between mt-1"><span class="order-txt"> 待付款订单</span> <span class="order-count">(10)</span></div>
            <div class="un-handle-item d-flex justify-content-between mt-1"><span class="order-txt"> 待付款订单</span> <span class="order-count">(10)</span></div>
            <div class="un-handle-item d-flex justify-content-between mt-1"><span class="order-txt"> 待付款订单</span> <span class="order-count">(10)</span></div>
          </li>
          <li class="order-column">
            <div class="un-handle-item d-flex justify-content-between mt-1"><span class="order-txt"> 待付款订单</span> <span class="order-count">(10)</span></div>
            <div class="un-handle-item d-flex justify-content-between mt-1"><span class="order-txt"> 待付款订单</span> <span class="order-count">(10)</span></div>
            <div class="un-handle-item d-flex justify-content-between mt-1"><span class="order-txt"> 待付款订单</span> <span class="order-count">(10)</span></div>
          </li>
          <li class="order-column">
            <div class="un-handle-item d-flex justify-content-between mt-1"><span class="order-txt"> 待付款订单</span> <span class="order-count">(10)</span></div>
            <div class="un-handle-item d-flex justify-content-between mt-1"><span class="order-txt"> 待付款订单</span> <span class="order-count">(10)</span></div>
            <div class="un-handle-item d-flex justify-content-between mt-1"><span class="order-txt"> 待付款订单</span> <span class="order-count">(10)</span></div>
          </li>
        </ul>
      </div>
    </div>
    <div class="browse-container d-flex justify-content-between out-topSpceing">
      <div class="goods-block">
        <h3 class="layout-title">商品总览</h3>
        <div class="goods-info d-flex">
          <div class="g-block">
            <span class="g-count">100</span>
            <p class="g-case">已下架</p>
          </div>
          <div class="g-block">
            <span class="g-count">400</span>
            <p class="g-case">已上架</p>
          </div>
          <div class="g-block">
            <span class="g-count">50</span>
            <p class="g-case">库存紧张</p>
          </div>
          <div class="g-block">
            <span class="g-count">5000</span>
            <p class="g-case">全部商品</p>
          </div>
        </div>
      </div>
      <div class="users-block">
        <h3 class="layout-title">用户总览</h3>
        <div class="goods-info d-flex">
          <div class="g-block">
            <span class="g-count">100</span>
            <p class="g-case">今日新增</p>
          </div>
          <div class="g-block">
            <span class="g-count">200</span>
            <p class="g-case">昨日新增</p>
          </div>
          <div class="g-block">
            <span class="g-count">1000</span>
            <p class="g-case">本月新增</p>
          </div>
          <div class="g-block">
            <span class="g-count">5000</span>
            <p class="g-case">会员总数</p>
          </div>
        </div>
      </div>
    </div>
    <div class="statistical-order-container out-topSpceing">
      <h3 class="layout-title">订单统计</h3>
      <div class="statis-content d-flex">
        <div class="sidebar-left">
          <ul class="layout-container d-flex flex-column">
            <li class="">
              <div class="total-count">本月订单总数</div>
              <span class="price">10000</span>
              <div class="contrast">
                <span class="centi-juse">+10%</span>
                同比上月
              </div>
            </li>
            <li class="mt-3">
              <div class="total-count">本周订单总数</div>
              <span class="price">10000</span>
              <div class="contrast">
                <span class="centi-lose">-10%</span>
                同比上周
              </div>
            </li>
            <li class="mt-3">
              <div class="total-count">本月销售总数</div>
              <span class="price">10000</span>
              <div class="contrast">
                <span class="centi-juse">+10%</span>
                同比上月
              </div>
            </li>
            <li class="mt-3">
              <div class="total-count">本月销售总数</div>
              <span class="price">50000</span>
              <div class="contrast">
                <span class="centi-lose">-10%</span>
                同比上周
              </div>
            </li>
          </ul>
        </div>
        <div class="tiemr-container">
          <div class="block">
            <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </div>
        <div class="echartsTable"><EchartsTemplate /></div>
      </div>
    </div>
  </div>
</template>
<script>
import EchartsTemplate from '../../components/common/echarts_template/EchartsTemplate.vue'
export default {
  name: '',
  data() {
    return {
      value2: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
    }
  },
  methods: {},
  components: {
    EchartsTemplate,
  },
}
</script>
<style lang="scss">
.home-container {
  margin: 40px 120px 0 120px;
  height: 100%;
  position: relative;
}
.address-layout {
  display: flex;
  margin-bottom: 20px;
  padding: 0;
}
.address-layout li {
  width: 25%;
  background: #fff;
  text-align: left;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  margin-right: 9px;
}
.layout-title {
  display: block;
  color: #606266;
  padding: 13px 20px;
  background: #f2f6fc;
  font-weight: bold;
  font-size: 16px;
  margin: 0;
}
.item-content {
  color: #409eff;
  padding: 20px;
  font-size: 18px;
}
.indent-spacing {
  padding: 20px 15px;
  box-sizing: border-box;
}
.indent_icon {
  width: 60px;
  height: 60px;
  float: left;
}
.indent-count {
  font-weight: normal;
  font-size: 16px;
  color: #909399;
  margin-left: 70px;
  margin-top: 8px;
}
.indent-total {
  position: relative;
  left: 10px;
  color: #606266;
  font-size: 18px;
}
.el-main {
  overflow: hidden;
}
.mine-layout {
  position: absolute;
  top: 0;
  right: 0;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  background: #fff;
  line-height: 1.6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.ewm-icon {
  width: 150px;
  height: 150px;
}
.attentionTxt {
  color: #409eff;
}
// 待处理事务layout
.handlematter-layout {
  width: 100%;
  // background: red;
  border: 1px solid #dcdfe6;
}
.cart-title {
  padding: 15px 20px;
  width: 100%;
  font-size: 16px;
  color: #606266;
  background: #f2f6fc;
  box-sizing: border-box;
  margin: 0;
  font-weight: bold;
}
.notHnadle-container {
  padding: 20px 40px;
  background: #fff;
}
.un-handle-item {
  padding: 5px 10px;
  border-bottom: 1px solid #ebeef5;
}
.order-column {
  width: 33.3333%;
  display: inline-block;
  padding: 0 5px;
}
.order-txt {
  font-size: 16px;
  color: #606266;
}
.order-count {
  color: #f56c6c;
}
.goods-block {
  border: 1px solid #dcdfe6;
  width: 49%;
}
.g-block {
  width: 25%;
  display: block;
  text-align: center;
}
.g-block .g-count {
  color: #f56c6c;
  font-size: 24px;
}
.g-block .g-case {
  margin-top: 5px;
}
.goods-info {
  padding: 30px 40px 30px 40px;
  background: #fff;
}
.users-block {
  width: 49%;
  border: 1px solid #dcdfe6;
}
.out-topSpceing {
  margin-top: 20px;
}
.statistical-order-container {
  border: 1px solid #dcdfe6;
}
.statis-content {
  position: relative;
  overflow: hidden;
}
.sidebar-left {
  width: 180px;
  overflow: hidden;
}
.sidebar-left ul {
  border-right: 1px solid #dcdfe6;
}
.total-count {
  color: rgb(144, 147, 153);
  font-size: 14px;
}
.price {
  color: rgb(96, 98, 102);
  padding: 10px 0;
  font-size: 24px;
}
.contrast {
  color: rgb(192, 196, 204);
  font-size: 14px;
}
.contrast .centi-lose {
  color: #f56c6c;
}
.contrast .centi-juse {
  color: #67c23a;
}
.tiemr-container {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 999;
}
</style>
